import React, {useEffect, useState} from 'react';
import style from './OrderDetails.module.scss'
import {useNavigate, useSearchParams} from "react-router-dom";
import {orderDetailsApi} from '../../http/orderApi'

function OrderDetails(props) {
    const navigate = useNavigate()
    const [state,setSate] =useState({
        customerName:'',
        phone:'',
        entryName:'',
        longTime:'',
        introduction:'',
        img:[],
        orderNum:'',
        discountNum:'',
        paymentNum:'',
        orderTime:'',
        paymentTime:'',
        transactionFlow:'',
        payClass:''
    })
    const [searchParams,SetSearchParams] =useSearchParams()
    const id = searchParams.get('id')
    console.log( searchParams.get('id'))
    useEffect(()=>{
        orderDetailsApi({id})
            .then(res=>{
                console.log(res.data.data)
                setSate({
                    ...res.data.data
                })
            })

    },[])


    //点击返回
    const backHandler =()=>{
        navigate(-1)
    }
    return (
        <div>
            <div className={style.back} onClick={backHandler}>返回</div>
            <div className={style.title}>待服务</div>
            <div className={style.main}>
                <div className={style.itme}>
                    <div className={style.left}>客户信息</div>
                    <div className={style.right}>
                        <div className={style.right_item}>
                            <div>客户姓名</div>
                            <div>{state.customerName}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>联系手机</div>
                            <div>{state.phone}</div>
                        </div>
                    </div>
                </div>
                <div className={style.itme}>
                    <div className={style.left}>项目信息</div>
                    <div className={style.right}>
                        <div className={style.right_item}>
                            <div>项目名称</div>
                            <div>{state.entryName}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>项目时长</div>
                            <div>{state.longTime}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>项目简介</div>
                            <div className={style.teshu}>{state.introduction}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>项目图片</div>
                            <div className={style.teshu}>
                                {state.img.map((item,index)=><img src={item} key={index}/>)}
                            </div>
                        </div>
                    </div>
                </div>
                <div className={style.itme}>
                    <div className={style.left}>订单信息</div>
                    <div className={style.right}>
                        <div className={style.right_item}>
                            <div>订单金额</div>
                            <div>{state.orderNum}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>优惠金额</div>
                            <div>{state.discountNum}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>支付金额</div>
                            <div>{state.paymentNum}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>下单时间</div>
                            <div>{state.orderTime}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>支付时间</div>
                            <div>{state.paymentTime}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>交易流水</div>
                            <div>{state.transactionFlow}</div>
                        </div>
                        <div className={style.right_item}>
                            <div>支付方式</div>
                            <div>{state.payClass}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div  className={style.submit}>核销</div>
        </div>
    );
}

export default OrderDetails;